<!--vue模板-->
<template>
  <el-dialog
    :model-value="visible"
    :title="data.id != undefined ? '修改员工' : '新增员工'"
    width="800"
    :close-on-click-modal="false"
    @close="cls"
  >
    <el-form
      ref="formRel"
      :model="data"
      :rules="rules"
      label-width="120px"
      style="max-width: 800px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号:" prop="user.account">
            <el-input
              placeholder="请输入账号"
              v-model="data.user.account"
              @blur="chk"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码:" prop="user.password">
            <el-input
              type="password"
              show-password
              placeholder="请输入密码"
              v-model="data.user.password"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <el-input placeholder="请输入姓名" v-model="data.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式:">
            <el-input placeholder="请输入手机号" v-model="data.mobile" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属部门:">
            <el-tree-select
              check-strictly
              v-model="data.deptId"
              :data="treeData"
              :render-after-expand="false"
              style="width: 240px"
              :props="{
                children: 'children',
                label: 'name',
                value: 'id'
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务:">
            <el-input placeholder="请输入职务" v-model="data.job" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="底薪:">
            <el-input-number placeholder="请输入底薪" v-model="data.salary" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生日:">
            <el-input placeholder="请输入职务" v-model="data.job" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入职时间:">
            <el-date-picker
              v-model="data.entryDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择入职时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色:">
            <el-select
              v-model="data.roleId"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="类型:">
            <el-radio-group v-model="data.type">
              <el-radio :value="1" size="large">普通员工</el-radio>
              <el-radio :value="2" size="large">内销</el-radio>
              <el-radio :value="3" size="large">外销</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品参数支持:">
            <el-radio-group v-model="data.pp">
              <el-radio :value="1" size="large">需要审核</el-radio>
              <el-radio :value="2" size="large">无需审核</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="年度业绩目标:">
            <el-input-number
              placeholder="请输入年度业绩目标"
              v-model="data.performance"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12"> &nbsp; </el-col>
      </el-row>
    </el-form>

    <div style="text-align: right">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="cls">取消</el-button>
    </div>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { saveEmp, updateEmp } from "@/api/employee.js";
import { checkUser } from "@/api/users.js";
import { queryTree } from "@/api/dept.js";

//表单引用
const formRel = ref(null);
//角色
const roleOptions = ref([]);
//默认用户可用
const isAccountEnable = ref(true);
//部门数据
const treeData = ref([]);
//响应式对象
const data = ref({
  user: {
    account: "",
    password: ""
  },
  name: "",
  mobile: "",
  deptId: 0,
  job: "",
  salary: 0,
  birthday: "",
  entryDate: "",
  roleId: "",
  type: 1,
  pp: 1,
  performance: 0
});
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
//声明事件
const emits = defineEmits(["close", "refresh"]);

//验证规则
const rules = reactive({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

//查询部门
function queryDeptTree() {
  queryTree().then(res => {
    if (res.code == 200) {
      treeData.value = res.data;
    }
  });
}

//检测用户名是否可用
async function chk() {
  if (data.value.user.account == "") {
    ElMessage({
      message: "用户名不能为空！",
      type: "warning"
    });
    return;
  }

  //用户名不空 验证
  let res = await checkUser(data.value.user.account);
  if (res.code == 200) {
    if (res.data == "no") {
      //用户已占用
      ElMessage({
        message: "该用户已占用！",
        type: "warning"
      });
      isAccountEnable.value = false;
    } else {
      isAccountEnable.value = true;
    }
  }
}

//方法
function cls() {
  //通知父组件  我要关闭了
  emits("close");
}

//保存
async function save() {
  if (!isAccountEnable.value) {
    //用户已占用
    ElMessage({
      message: "该用户已占用！",
      type: "warning"
    });
    return;
  }
  //验证  valid=false 说明验证未通过
  const valid = await formRel.value.validate(() => {});
  if (!valid) return;

  let res;
  if (data.value.id != undefined) {
    //修改
    res = await updateEmp(data.value);
  } else {
    //新增
    res = await saveEmp(data.value);
  }

  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件刷新数据
    emits("refresh");
    cls();
  }
}

function init(row) {
  queryDeptTree();
  if (row) {
    let tmp = row;
    tmp.user = {};
    tmp.user.account = row.account;
    tmp.user.password = row.password;
    if (row.deptId == 0) {
      tmp.deptId = "";
    }
    data.value = tmp;
  } else {
    //新增
    data.value = {
      user: {
        account: "",
        password: ""
      },
      name: "",
      mobile: "",
      deptId: "",
      job: "",
      salary: 0,
      birthday: "",
      entryDate: "",
      roleId: "",
      type: 1,
      pp: 1,
      performance: 0
    };
  }
}

defineExpose({ init });
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>